<template>
    <div class="donation-records">
        <van-nav-bar title="捐赠记录" left-text="返回" left-arrow @click-left="goBack" />
        <van-cell-group v-for="item in listData" :key="String(item.donationRecordsId)" :title="'捐赠记录ID：' + item.donationRecordsId">
            <van-cell title="募捐项目名称" :value="String(item.fundraisingProjectsName)" />
            <van-cell title="募捐项目所属机构" :value="String(item.agencyName)" />
            <van-cell title="捐赠金额" :value="String(item.donationAmount) + '元'" />
            <van-cell title="捐赠时间" :value="new Date(String(item.donationTime)).toLocaleString()" />
            <van-cell>
                <van-button type="primary" size="mini" @click="toComment(item.donationRecordsId, item.fundraisingProjectsId)" :disabled="item.status === 1">评论</van-button>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { adminApi } from '../../api/app';

interface DonationRecords {
    donationRecordsId: String;
    agencyName: String;
    donationAmount: Number;
    donationTime: String;
    fundraisingProjectsName: String;
    fundraisingProjectsId: String;
    status: Number;
}

const router = useRouter();
/** 列表数据 */
const listData = ref<DonationRecords[]>([]);

/** 返回个人主页 */
const goBack = () => {
    router.back();
}

onMounted(() => {
    const { donatorId } = JSON.parse(localStorage.getItem('donator') || '');
    adminApi.getDonationRecordsByDonatorId({ donatorId }).then((res: any) => {
        if (res) {
            listData.value = res;
        }
    });
});

/** 评论 */
const toComment = (donationRecordsId: String, fundraisingProjectsId: String) => {
    router.push('/comment/' + donationRecordsId + '/' + fundraisingProjectsId);
};
</script>

<style lang="less">
.donation-records {
    width: 100vw;
    height: 100vh;
    background-color: rgba(237, 231, 231, 0.422);
    overflow: auto;
}
</style>